<template>
    <div class="activityItem" @click='goDetail'>
        <div class="flex">
            <span class="activity-status" :class="'status-'+activityData.status">
                {{activityData.status|activityStatus}}
            </span>
            <div class="title">
                {{activityData.title}}
            </div>
        </div>
        <div class="flex flex-space-between">
            <span>服务时间：<span class="tips">{{activityData.activityTime}}</span> ~ <span class="tips">{{activityData.endingTime}}</span></span>
        </div>
        <div class="flex-space-between">
            <span>
                服务天数：
                <i class="tips">{{activityData.activityDays}}</i>天
            </span>
            <div>招募人数：
                <span>{{activityData.recruitNum}}</span>
            </div>
        </div>
        <div>
            <span>服务地点：</span>
            {{activityData.area}} {{activityData.village}} {{activityData.activityPlace}}
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            activityData:{}
        },
        computed: {
        },
        methods: {
            goDetail(){
                this.$router.push(`/myTeamActivityDetail/${this.activityData.activityId}`)
            }
        },
    }
</script>

<style scoped lang='scss'>
    .activityItem{background: #EFEFEF;border-radius: .1rem;color: #888888;margin-bottom: .14rem;
        padding: .33rem .27rem ;
    }
    .activity-status{
        min-width: 40px;
        border-radius: .16rem;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: .32rem;
        padding: 0 .2rem;
        margin-right: .32rem;
    }
    .title{color: #393939;
        font-size: 15px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tips{
        color: #393939;
        font-style: normal;
    }
    .text-muted {
        color:#888888;
    }
    .activityItem{font-size: 12px;
        &>div{margin-bottom: .2rem;;}
    }
    .apply-num{border: solid 1px #F65D5D;color: #F65D5D;border-radius: 4px;
        padding:  2px;
    }
    .status-0{
        background: #b5bbbe;
    }
    .status-1{
        background: #FFA518;
    }
    .status-2{
        background: #378EEF;
    }
    .status-3{
        background: #0A930A;
    }
    .status-4{
        background: #F65D5D;
    }
</style>
